<template>
  <div class="content">
    <div class="head">
      <div v-for="(item,index) in title" :key="index" class="title" @click="changeType(index)">
        <div :class="[index==active?'active':'ins-active']">
          <span class="title-name">{{item.name}}</span>
        </div>
      </div>
    </div>
    <div class="sear">
      <div class="sear_item">
        <label class="sear_item_label">订单编号</label>
        <el-input class="sear_item_input" v-model="orderNo" placeholder="输入订单编号" clearable></el-input>
      </div>
      <div class="sear_item">
        <label class="sear_item_label">用户昵称</label>
        <el-input class="sear_item_input" v-model="nickname" placeholder="输入订单编号" clearable></el-input>
      </div>
      <div class="sear_item">
        <label class="sear_item_label">收货姓名</label>
        <el-input class="sear_item_input" v-model="receiveName" placeholder="输入订单编号" clearable></el-input>
      </div>
      <div class="sear_item">
        <label class="sear_item_label">收货电话</label>
        <el-input class="sear_item_input" v-model="receivePhone" placeholder="输入订单编号" clearable></el-input>
      </div>
      <div class="sear_item">
        <label class="sear_item_label">下单日期</label>
        <el-date-picker
          style="margin-left:10px"
          v-model="time"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="sear_item">
        <el-button type="primary" size="small" @click="getOrderData">搜索</el-button>
      </div>
    </div>
    <el-table :data="tableData" border>
      <el-table-column label="id" width="50px" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.orderNo}}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.nickname}}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.productName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付金额" align="center">
        <template slot-scope="scope">
          <span>￥ {{scope.row.actualAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.receiveName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货电话" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.receivePhone}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="售后状态" align="center">
        <template slot-scope="scope">
          <span style="color:#ff0000">{{scope.row.refundStatusMsg}}</span>
        </template>
      </el-table-column>

      <el-table-column label="详情" align="center" width="80px">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="detail(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180px">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            v-if="scope.row.refundStatus==0"
            @click="argee(scope.row.id)"
          >同意</el-button>
          <el-button
            type="danger"
            size="mini"
            v-if="scope.row.refundStatus==0"
            @click="openForm(scope.row.id)"
          >拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="index"
        :page-size="pageSize"
        :page-sizes="[10,20]"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog title="退款信息" :visible.sync="visible1" width="500px">
      <div class="detail-top">
        <div class="refund-no-view">
          <div class="refundNo-label">退款单号</div>
          <div class="refundNo">{{refundDetail.refundNo}}</div>
        </div>
        <div class="refund-status">{{refundDetail.statusMsg}}</div>
      </div>
      <div class="virtul">
        <div v-for="(item,index) in refundDetail.products" :key="index" class="item">
          <el-image :src="item.image" class="product-image" fit="fill"></el-image>
          <div class="prodcut-name-view">
            <div class="product-name">{{item.productName}}</div>
            <div class="product-sku-name">{{item.skuName}}</div>
          </div>
        </div>
      </div>
      <div class="label-item">
        <div class="label-name">退款金额</div>
        <div class="label-amount">￥{{refundDetail.amount}}</div>
      </div>
      <div class="label-item">
        <div class="label-name">申请时间</div>
        <div class="label-value">{{refundDetail.time}}</div>
      </div>
      <div class="label-item">
        <div class="label-name">退款原因</div>
        <div class="label-value">{{refundDetail.reason}}</div>
      </div>
      <div class="record-view">
        <div>
          <div v-for="(item,index) in refundDetail.records" :key="index" class="record-item">
            <div class="label-name">{{item.message}}</div>
            <div class="record-time" v-if="item.reason!=null&&item.reason!=''">({{item.reason}})</div>
            <div class="record-time">{{item.time}}</div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="拒绝原因" :visible.sync="visible2" width="400px">
      <el-form>
        <el-form-item label="理由">
          <el-input placeholder="请输入" v-model="reason" style="width:250px" />
        </el-form-item>
      </el-form>
      <div class="operation-view">
        <el-button type="primary" size="small" @click="reject()">确定</el-button>
        <el-button size="small" @click="visible2=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  refundList,
  refundDetail,
  handleAgree,
  handleReject
} from "../../api/order.js";
import { format } from "@/utils/dateUtil.js";
export default {
  data() {
    return {
      reason: "",
      visible1: false,
      visible2: false,
      active: 0,
      tableData: [],
      refundDetail: {},
      type: "",
      orderNo: "",
      nickname: "",
      receiveName: "",
      receivePhone: "",
      time: "",
      index: 1,
      pageSize: 10,
      total: 0,
      orderId: 0,
      title: [
        { type: null, name: "全部" },
        { type: 0, name: "未处理" },
        { type: 1, name: "已处理" },
        { type: 2, name: "退款中" },
        { type: 3, name: "已完成" }
      ],
      orderDetail: {}
    };
  },
  mounted() {
    this.getOrderData();
  },
  methods: {
    reject() {
      if (this.reason.trim() == "") {
        this.$message({
          type: "warning",
          message: "理由不能为空"
        });
        return;
      }
      handleReject(this.orderId, this.reason).then(res => {
        this.$message({
          type: "success",
          message: "处理成功"
        });
        this.index = 1;
        this.getOrderData();
        this.visible2 = false;
      });
    },
    openForm(id) {
      this.orderId = id;
      this.visible2 = true;
    },
    argee(id) {
      this.$confirm("此操作将退款给用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          handleAgree(id).then(res => {
            this.$message({
              type: "success",
              message: "处理成功"
            });
            this.index = 1;
            this.getOrderData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    detail(id) {
      this.refundDetail = {};
      this.visible1 = true;
      refundDetail(id).then(res => {
        this.refundDetail = res.data;
      });
    },
    changeType(index) {
      this.active = index;
      this.getOrderData();
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.getOrderData();
    },
    handleCurrentChange(page) {
      this.index = page;
      this.getOrderData();
    },
    getOrderData() {
      var type = this.title[this.active].type;

      var startTime = "";
      var endTime = "";
      if (this.time != null && this.time != "") {
        startTime = format(this.time[0]);
        endTime = format(this.time[1]);
      }
      refundList(
        type,
        this.orderNo,
        this.nickname,
        this.receiveName,
        this.receivePhone,
        startTime,
        endTime,
        this.index,
        this.pageSize
      ).then(res => {
        this.total = res.data.total;
        this.tableData = res.data.records;
      });
    }
  }
};
</script>
<style scoped>
.operation-view {
  width: 100%;
  justify-content: flex-end;
  display: flex;
  margin-top: 25px;
  padding-right: 25px;
}
.record-item {
  margin: 10px 0;
}
.record-time {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
}
.record-view {
  border-radius: 10px;
  background-color: #f2f3f5;
  padding: 20px;
  margin-top: 20px;
}
.label-value {
  color: #606266;
  font-size: 14px;
}
.label-amount {
  color: #ff0000;
  font-size: 14px;
}
.label-name {
  color: #606266;
  font-size: 14px;
}
.label-item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin: 10px 0;
  padding-right: 20px;
  box-sizing: border-box;
}
.product-sku-name {
  color: #909399;
  font-size: 12px;
  margin-top: 10px;
}
.product-name {
  color: #606266;
  font-size: 14px;
}
.prodcut-name-view {
  width: 300px;
  margin-left: 10px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}
.item {
  display: flex;
  padding: 10px 0;
}
.virtul {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}
.product-image {
  width: 100px;
  height: 100px;
}
.refund-no-view {
  align-items: flex-end;
  display: flex;
}
.refund-status {
  color: #ff0000;
}
.refundNo {
  margin-left: 10px;
  color: #909399;
  font-size: 12px;
}
.refundNo-label {
  color: #606266;
  font-size: 14px;
}
.detail-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.ins-active {
  width: 120px;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}
.active {
  width: 120px;
  height: 100%;
  border-bottom: 2px solid #16a9f2;
  justify-content: center;
  align-items: center;
  display: flex;
}
.title-name {
  font-size: 14px;
  color: #606266;
}
.ok_bt {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 40px;
  box-sizing: border-box;
}
.time {
  font-size: 12px;
  color: #909399;
  margin-left: 10px;
}
.amount_view {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
}
.amount {
  font-size: 12px;
  color: #909399;
  margin-left: 10px;
}
.amount_text {
  font-size: 12px;
  color: #909399;
}
.order_amount {
  display: flex;
  margin-top: 10px;
  align-items: flex-end;
}
.receive_text {
  margin-top: 10px;
  font-size: 12px;
  color: #909399;
}
.receive_title {
  font-size: 14px;
  color: #606266;
  margin-top: 20px;
}
.receive_view {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 20px;
}
.product_img {
  width: 50px;
  height: 50px;
}

.detail_product_view {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.detail_head_right {
  font-size: 14px;
  color: #ff0000;
}
.detail_head_left {
  font-size: 14px;
  color: #606266;
}
.detail_head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #f2f3f5;
}
.detail_view {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.sear_item_input {
  width: 200px;
  margin-left: 10px;
}
.sear_item_label {
  font-size: 14px;
  color: #606266;
}
.sear_item {
  margin: 10px;
  display: flex;
  align-items: center;
}
.title {
  cursor: pointer;
  flex: 1;
  justify-content: center;
  display: flex;
  border-left: 1px solid #f2f3f5;
}
.head {
  width: 100%;
  max-width: 100%;
  height: 50px;
  background-color: #ffffff;
  margin-bottom: 20px;
  display: flex;
}
.sear {
  width: 100%;
  max-width: 100%;
  background-color: #ffffff;
  margin-bottom: 20px;
  display: flex;
  padding: 10px 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.page {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 100px;
  align-items: center;
}
</style>